<template>
  <view class="tp-star-tag">
    <view class="star-wrapper">
      <text class="score">{{star}}分</text>
    </view>
    <view class="comment-wrapper">
      <text class="comment">{{comment}}条评论</text>
    </view>
    
  </view>
</template>

<script>
  export default {
    name:"tp-star-tag",
    props: {
      star: [String, Number],
      comment: String
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  
  .tp-star-tag {
    background: linear-gradient(90deg, $brand-3 10%, #fff);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 2px;
    border: 1px solid var(--brand-2);
    font-size: $font-size-sm;
    
    .star-wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      background-color: $brand-2;
      padding: 1px 4px;
      .score {
        padding-left: 2px;
        color: var(--white);
      }
    }
    
    .comment-wrapper {
      color: var(--gray-2);
      padding: 0 $gutter * 0.5;
    }
  }

</style>